<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Galleria <span>Thumbnail</span></h1>
        <p>Thumbnails represent a smaller version of the actual content.</p>
    </div>
    <app-demoActions github="galleria"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Positioned at Bottom</h5>
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '660px'}" [numVisible]="5"> 
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
    
    <div class="card">
        <h5>Positioned at Left</h5>
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '660px'}" [numVisible]="4"
            thumbnailsPosition="left">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>

    <div class="card">
        <h5>Positioned at Right</h5>
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '660px', 'margin-top':'2em'}" [numVisible]="4"
            thumbnailsPosition="right"> 
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>

    <div class="card">
        <h5>Positioned at Top</h5>
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '660px', 'margin-top':'2em'}" [numVisible]="5"
            thumbnailsPosition="top">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
    
    <div class="card">
        <h5>Positioned at Bottom</h5>
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '660px', 'margin-top':'2em'}" [numVisible]="5"
            thumbnailsPosition="bottom">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="galleriathumbnaildemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriathumbnaildemo.ts" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class GalleriaDemo implements OnInit &#123;
    images: any[];

    responsiveOptions:any[] = [
        &#125;
            breakpoint: '1024px',
            numVisible: 5
        &#125;,
        &#125;
            breakpoint: '768px',
            numVisible: 3
        &#125;,
        &#125;
            breakpoint: '560px',
            numVisible: 1
        &#125;
    ];

    constructor(private photoService: PhotoService) &#125; &#125;

    ngOnInit() &#125;
        this.photoService.getImages().then(images =>&#125; 
            this.images = images
        &#125;)
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="galleriathumbnaildemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriathumbnaildemo.html" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Positioned at Bottom&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '660px'&#125;" [numVisible]="5"&gt; 
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;h5&gt;Positioned at Left&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '660px'&#125;" [numVisible]="4"
    thumbnailsPosition="left"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;h5&gt;Positioned at Right&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '660px', 'margin-top':'2em'&#125;" [numVisible]="4"
    thumbnailsPosition="right"&gt; 
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;h5&gt;Positioned at Top&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '660px', 'margin-top':'2em'&#125;" [numVisible]="5"
    thumbnailsPosition="top"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;h5&gt;Positioned at Bottom&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '660px', 'margin-top':'2em'&#125;" [numVisible]="5"
    thumbnailsPosition="bottom"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
</app-code>

        </p-tabPanel>
    </p-tabView>
</div>

